<template>
<div class="favorites-page">
  <!--<headBar  isBack="show">-->
    <!--<div slot="xm-header-center">-->
      <!--<div class="xm-header-title" >我的收藏</div>-->
    <!--</div>-->
    <!--<div slot="xm-header-right"></div>-->
  <!--</headBar>-->
  <div class="opt-head">
    <div class="opt flex flex-pack-center">
      <span :class="{'active': !isStore}"  @click="changeFavorites(false)">商品</span>
      <span :class="{'active': isStore}"  @click="changeFavorites(true)">店铺</span>
      <span class="opt-btn" @click="checkBoxStatus(true)" v-text="!isEdit ? '编辑' : '完成'"></span>
    </div>
  </div>
  <!--商品-->
  <section class="like" v-show="!isStore">
    <ul class="cate-list flex">
      <li v-for="item in list" @click="goodDetail(item)">
        <div class="cell-img">
          <img :src="item.image">
        </div>
        <div class="cell-info">
          <h3>{{item.wareName}}</h3>
          <div class="price">
            <span>￥<em>{{item.priceUnit_int}}</em>.{{item.priceUnit_float}}/件 </span>
            <i class="fr">{{item.numberPerBox}}{{item.unitName}}/件</i>
          </div>
          <div class="cell-tags">
            <span class="zy" v-show="item.supplierTypeId==1">自营</span>
            <span class="icon tag" v-show="item.numberInventory>0">现货</span>
            <span class="icon tag" v-show="item.pandaCoinStatus!=-1">熊猫币</span>
            <span class="icon tag"  v-show="item.openPresale>0">可预售</span>
          </div>
          <p class="company"  @click.stop="shopDetail(item)">
            <i class="icon icon-dianpu5"></i>{{item.supplierName}}
          </p>
        </div>
        <span class="checkBox" v-show="wareCheckBoxStatus"><i class="icon icon-selected1" :class="{'active':item.isChecked}"></i></span>
      </li>
    </ul>
  </section>
  <!--店铺-->
  <section class="like store-group" v-show="isStore">
    <div class="cate-group flex border-bottom" v-for="item in shopList" @click="shopDetail(item)">
      <span class="checkBox" v-show="shopCheckBoxStatus"><i class="icon icon-selected1" :class="{'active':item.isChecked}"></i></span>
      <div class="group-left">
        <img :src="item.supplierImage">
      </div>
      <div class="group-right flex-1">
        <h3><i class="icon icon-dianpu5"></i>{{item.supplierName}}</h3>
        <p>{{item.mainBiz}}</p>
      </div>
    </div>
  </section>
  <!--数据为空-->
  <nodata textContent="没有数据..." v-show="showTip"></nodata>
  <!--取消收藏-->
  <section class="bottom-section" v-show="cancelStatus" @click="cancelSz">
    <div class="foot-bar flex">
      <a class="flex-1">取消收藏</a>
    </div>
  </section>
</div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
          isStore: false,
          list:[],
          shopList: [],
          showTip: false,
          wareCheckBoxStatus:false,
          shopCheckBoxStatus:false,
          cancelStatus:false,
          cId:'',
          isEdit:false
      };
    },
    methods: {
        /**
         *  获取商品收藏列表
         */
        getFavorites(){
          getFavorites().then(data=>{
            if(data.returnCode == '000000'){
              [].forEach.call(data.result.wareFavoritesList, (item)=>{
                  item.image = item.mainImage.split(',')[0];
                  this.$set(item,"isChecked",false);
              })
              this.list = data.result.wareFavoritesList;
              this.list.length > 0? this.showTip = false: this.showTip = true;
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        /**
         * 取消商品收藏
         * @param <string> 收藏ID
         * */
        cancelFavorites(ids){
          cancelFavorites({ids: ids}).then(data=>{
            if(data.returnCode == '000000'){
              this.getFavorites();
            }
          })
        },
        /**
         * 获取商店收藏列表
         * */
        myShopFavorites(){
            myShopFavorites().then(data=>{
                if(data.returnCode == '000000'){
                    [].forEach.call(data.result.shopFavoritesList, (item)=>{
                        this.$set(item,"isChecked",false);
                    })
                    this.shopList = data.result.shopFavoritesList;
                    this.shopList.length > 0? this.showTip = false: this.showTip = true;
                }
            })
        },
        /**
         * 取消店铺收藏
         * @param <string> id
         * */
        cancelShopFavorites(ids){
            cancelShopFavorites({ids: ids}).then(data=>{
                if(data.returnCode == '000000'){
                    this.myShopFavorites();
                }
            });
        },

        /**
         * 商品详情
         * @param <string> 商品id
         * */
        goodDetail(item){
            if(!this.isEdit){
                this.$router.push({name: 'goodsDetail',params: {wareId: item.wareId}});
            }else {
                item.isChecked=!item.isChecked;
                this.cancelBtnIsShow();
            }
        },
        shopDetail(item){
            if(!this.isEdit) {
                this.$router.push({name: 'store', params: {storeId: item.supplierId}});
            }else {
                item.isChecked=!item.isChecked;
                this.cancelBtnIsShow();
            }
        },
        /**
         * 切换显示
         * @param bool true 商品收藏
         * */
        changeFavorites(bool){
            this.isEdit=false;
            this.isStore = bool;
            this.cancelStatus=false;
            if(this.isStore){
                this.shopCheckBoxStatus=false;
                this.myShopFavorites();
            }else{
                this.wareCheckBoxStatus=false;
                this.getFavorites();
            }
        },
        /**
         * 选择框选择
         * */
        checkStatus(item){
            item.isChecked=!item.isChecked;
            this.cancelBtnIsShow();
        },
        cancelBtnIsShow(){
            let checkedList=[];
            if(this.isStore){
                [].forEach.call(this.shopList, (item)=>{
                    if(item.isChecked){
                        checkedList.push(item);
                    }
                });
            }else {
                [].forEach.call(this.list, (item)=>{
                    if(item.isChecked){
                        checkedList.push(item);
                    }
                });
            }
            this.cancelStatus=checkedList.length>0 ? true :false;
        },
        /**
         * 多选框开关
         * */
        checkBoxStatus(){
            this.isEdit=!this.isEdit;
            this.cancelStatus=false;
            this.shopCheckBoxStatus=this.isEdit;
            this.wareCheckBoxStatus=this.isEdit;
            if(this.isEdit){
               this.cancelBtnIsShow();
            }
        },
        /**
         * 取消收藏（总方法）
         * */
        cancelSz(){
           this.cId='';
            if(this.isStore){
                [].forEach.call(this.shopList, (item)=>{
                    if(item.isChecked){
                        this.cId+=item.id+',';
                    }
                })
                if(!this.cId) return;
                this.cancelShopFavorites(this.cId);
                this.checkBoxStatus();
            }else{
                [].forEach.call(this.list, (item)=>{
                    if(item.isChecked){
                        this.cId+=item.id+',';
                    }
                });
                if(!this.cId) return;
                this.cancelFavorites(this.cId);
                this.checkBoxStatus();
            }
        },

    },
    filters: {

    },
    created() {
      this.getFavorites();
      this.myShopFavorites();
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less" scoped>
  @import "./favorites.less";
  .bottom-section .foot-bar a {
    display: inline-block;
    height: 100%;
    background: #FF4A4A;
    color: #fff;
    /*background: #E8EDF2;*/
    /*color: #999;*/
    &.active{

    }
  }
</style>
